<template>
  <div class="card-wrap">
    <a-card :bordered="false" hoverable>
      <template v-if="image" #cover>
        <img alt="example" :src="image" />
      </template>
      <a-card-meta>
        <template #title>
          <a-typography-text style="margin-right: 10px"
            >{{ title }}
          </a-typography-text>
        </template>
        <template #description>
          <a-typography-paragraph ellipsis :rows="3">
            {{ description }}
          </a-typography-paragraph>
        </template>
      </a-card-meta>
      <template #actions>
        <a-space size="large" class="action-icons">
          <a-button
            type="text"
            :class="{ 'active-icon': liked }"
            style="padding: 0"
            @click="toggleLike"
          >
            <icon-heart :style="{ color: liked ? '#ff4d4f' : '' }" />
          </a-button>
          <a-button
            type="text"
            :class="{ 'active-icon': starred }"
            style="padding: 0"
            @click="toggleStar"
          >
            <icon-star :style="{ color: starred ? '#faad14' : '' }" />
          </a-button>
          <a-button
            type="text"
            :class="{ 'active-icon': shared }"
            style="padding: 0"
            @click="toggleShare"
          >
            <icon-share-internal :style="{ color: shared ? '#1890ff' : '' }" />
          </a-button>
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, ref } from 'vue';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    image: {
      type: String,
      default: '',
    },
  });

  const liked = ref(false);
  const starred = ref(false);
  const shared = ref(false);

  const toggleLike = () => {
    liked.value = !liked.value;
  };

  const toggleStar = () => {
    starred.value = !starred.value;
  };

  const toggleShare = () => {
    shared.value = !shared.value;
  };
</script>

<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;

    &:hover {
      transform: translateY(-4px);
      cursor: pointer; /* 鼠标悬停时显示为小手 */
    }

    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;

      .arco-card-body {
        padding: 0;

        .arco-card-meta {
          display: flex;
          flex-direction: column;
          height: 100%;

          .arco-card-meta-content {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
          }

          .arco-card-meta-footer {
            display: flex;
            align-items: center;
            padding: 8px 16px;
          }
        }
      }

      .arco-card-cover img {
        width: 100%;
        height: auto;
      }
    }
  }
</style>
